<template>
  <el-dialog :visible.sync="isShowDetail">
      <div class="detail-container">
    <div class="oilNum-wrapper">
      <div class="oilNum-title">
        <div class="title-color"></div>
        <div class="title-text">订单信息</div>
      </div>
      <el-table 
        v-loading="loading" 
        size="small" 
        :data="orderInfo" 
        stripe
        border
        style="width: 100%"
        >
        <el-table-column
          prop="orderId"
          label="订单号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderDate"
          label="下单时间"
          align="center">
          <template slot-scope="scope">
            {{scope.row.orderDate| formatTime('YYYY-MM-DD HH:mm:ss', '--')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="payDt"
          label="支付时间"
          align="center">
          <template slot-scope="scope">
            {{scope.row.payDt | formatTime('YYYY-MM-DD HH:mm:ss', '--')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="payTypeName"
          label="支付方式"
          align="center">
        </el-table-column>
      </el-table>
      <el-table 
        v-loading="loading" 
        size="small" 
        :data="orderInfo" 
        stripe
        border
        style="width: 100%"
        >
        <el-table-column
          prop="orderPayFlagName"
          label="订单状态"
          align="center">
        </el-table-column>
        <el-table-column
          prop="refundReason"
          label="退款原因"
          align="center">
        </el-table-column>
        <el-table-column
          prop="refundDate"
          label="退款时间"
          align="center">
          <template slot-scope="scope">
            {{scope.row.refundDate | formatTime('YYYY-MM-DD HH:mm:ss', '--')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="gasName"
          label="所属油站"
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="oilNum-wrapper">
      <div class="oilNum-title">
        <div class="title-color"></div>
        <div class="title-text">支付信息</div>
      </div>
      <el-table 
        v-loading="loading" 
        size="small" 
        :data="payInfo" 
        stripe
        border
        style="width: 100%"
        >
        <el-table-column
          prop="amountGun"
          label="加油金额"
          align="center">
        </el-table-column>
        <el-table-column
          prop="oilNumName"
          label="油品"
          align="center">
        </el-table-column>
        <el-table-column
          prop="litre"
          label="升数"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gunNo"
          label="油枪号"
          align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</el-dialog>
</template>

<script>
export default {
  name: 'pos_orderDetail',
  props: ['orderId'],
  data () {
    return {
      isShowDetail: false,
      loading: false,
      orderInfo: [{
        orderId: '',
        orderDate: '',
        payDt: '',
        payTypeName: '',
        orderPayFlagName: '',
        refundReason: '',
        refundDate: '',
        gasName: ''
      }],
      payInfo: [{
        amountGun: 0,
        oilNumName: '',
        gunNo: 0,
        litre: 0
      }]
    }
  },
  // watch: {
  //   isShowDetail (val) {
  //     if (val) {
  //       this.getOrderDetail()
  //     } else {
  //       this.init()
  //     }
  //   }
  // },
  methods: {
    init () {
      this.orderInfo = [{
        orderId: '',
        orderDate: '',
        payDt: '',
        payTypeName: '',
        orderPayFlagName: '',
        refundReason: '',
        refundDate: '',
        gasName: ''
      }]
      this.payInfo = [{
        amountGun: 0,
        oilNumName: '',
        gunNo: 0,
        litre: 0
      }]
    },
    getOrderDetail (row) {
      let obj = {orderInfo: {...this.orderInfo[0]}, payInfo: {...this.payInfo[0]}}
      for (let i in obj) {
        this[i].splice(0,1,this.setObj(obj[i], row))
      }
    },
    setObj (obj, result) {
      for (let key in obj) {
        if (result[key] !== null) {
          obj[key] = result[key]
        } else {
          obj[key] = '--'
        }
      }
      return obj
    }
  }
}
</script>

<style lang="less" scoped>
 @import url('../styles/detail.less');
</style>
